<template>
    <div class="common-page page-staff-corp-company" v-loading.fullscreen="loading">
        <div class="common-page__head">
            <comp-paths class="route" :paths="['/staff/corp', '/staff/corp/companys', $route.fullPath]"></comp-paths>
            <div class="title" v-if="company">
                <div class="text">{{ company.name }}</div>
            </div>
            <div class="title" v-else></div>
        </div>
        <comp-tabs class="common-page__head" :tabs="[$route.fullPath, '/staff/corp/company/orders?companyId=' + companyId, '/staff/corp/company/products?companyId=' + companyId, '/staff/corp/company/demands?companyId=' + companyId, '/staff/corp/company/attendances?companyId=' + companyId]"></comp-tabs>
        <div class="common-page__body common-form" v-if="company">
            <div class="rows">
                <div class="row row--head">
                    <div class="name">基本信息</div>
                    <div class="value"></div>
                </div>
                <div class="row">
                    <div class="name">{{ company.typeText }}名称</div>
                    <div class="value">{{ company.name }}</div>
                </div>
                <div class="row">
                    <div class="name">{{ company.typeText }}简介</div>
                    <div class="value">
                        <span class="button" @click="action('company-desc', true)">查看</span>
                    </div>
                </div>
                <div class="row">
                    <div class="name">法定代表人</div>
                    <div class="value">{{ company.owner }}</div>
                </div>
                <div class="row">
                    <div class="name">{{ company.typeText }}规模</div>
                    <div class="value">{{ company.sizeText }}</div>
                </div>
                <div class="row">
                    <div class="name">所在地区</div>
                    <div class="value">{{ company.city.name + company.county.name }}</div>
                </div>
                <div class="row">
                    <div class="name">详细地址</div>
                    <div class="value">
                        <span class="text">{{ company.location.address }}</span>
                        <a class="button" :href="company.location.link" target="_blank" v-if="company.location.lng > 0 && company.location.lat > 0">查看</a>
                    </div>
                </div>
                <div class="row">
                    <div class="name">所属行业</div>
                    <div class="value">{{ company.industry.name }}</div>
                </div>
                <div class="row">
                    <div class="name">所属分类</div>
                    <div class="value">{{ company.tag.name }}</div>
                </div>
                <div class="row">
                    <div class="name">资格认定</div>
                    <div class="value">
                        <span class="text" v-if="company.cert01 === 'yes'">高新技术企业</span>
                        <span class="text" v-if="company.cert02 === 'yes'">单项冠军企业</span>
                        <span class="text" v-if="company.cert03 === 'yes'">国家级专精特新小巨人企业</span>
                        <span class="text" v-if="company.cert04 === 'yes'">自治区级专精特新小巨人企业</span>
                        <span class="text" v-if="company.cert05 && company.cert05 !== 'not'">制造业创新中心（{{ company.cert05Text }}）</span>
                        <span class="text" v-if="company.cert06 && company.cert06 !== 'not'">企业技术中心（{{ company.cert06Text }}）</span>
                    </div>
                </div>
                <div class="row">
                    <div class="name" style="height: auto; min-height: 20px">主管工作队</div>
                    <div class="value">
                        <span class="text" v-for="dept in company.depts" :key="dept.id">{{ dept.name }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="name">最近走访</div>
                    <div class="value">
                        <span v-if="company.attendance.id">{{ company.attendance.client.name }}</span>
                        <span style="margin-left: 0.5em; color: #aaa" v-if="company.attendance.id">{{ company.attendance.startAt }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="name">事项统计</div>
                    <div class="value">
                        <span>共 {{ company.stats.ordersTotal }} 项</span>
                        <span style="margin-left: 0.5em; color: #aaa">未办结 {{ company.stats.ordersFinishedNotTotal }} 项</span>
                    </div>
                </div>
                <div class="row">
                    <div class="name">添加时间</div>
                    <div class="value">{{ company.createdAt }}</div>
                </div>
                <div class="row row--picture">
                    <img class="value" :src="company.logo.short" v-if="company.logo.id" />
                    <img class="value" :src="require('../assets/company-avatar.png')" v-else />
                </div>
            </div>
            <div class="rows" v-if="self">
                <div class="row row--head">
                    <div class="name">联系人信息</div>
                    <div class="value"></div>
                </div>
                <div class="row row--2x">
                    <div class="value">
                        <el-table size="medium" border :data="company.employees">
                            <el-table-column label="姓名/手机号" min-width="6">
                                <template #default="scope">
                                    <span>{{ scope.row.client.name }}</span>
                                    <span style="margin-left: 0.5em; color: #aaa">{{ scope.row.client.mobile }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="职务" min-width="4">
                                <template #default="scope">{{ scope.row.duty }}</template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="rows" v-if="self">
                <div class="row row--head">
                    <div class="name" style="width: auto">服务专员信息</div>
                    <div class="value"></div>
                </div>
                <div class="row row--2x">
                    <div class="value">
                        <el-table size="medium" border :data="company.helpers">
                            <el-table-column label="姓名/手机号" min-width="8">
                                <template #default="scope">
                                    <span>{{ scope.row.client.name }}</span>
                                    <span style="margin-left: 0.5em; color: #aaa">{{ scope.row.client.mobile }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="所属部门及担任职务" min-width="16">
                                <template #default="scope">
                                    <div v-for="depment in scope.row.client.depments" :key="depment.id">
                                        <span>{{ depment.dept.name }}</span>
                                        <span> - </span>
                                        <span>{{ depment.duty }}</span>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div> 
        <div class="common-page__foot" v-if="self">
            <el-button type="warning" size="small" icon="el-icon-setting" @click="setCompany()">完善资料</el-button>
        </div>
        <comp-dialog title="企业/项目简介" width="600px" height="80vh" ref="companyDesc">
            <comp-html-editor style="height: 100%" ref="companyDescEditor" :content="company.desc" v-if="company">
                <template #foot="scope">
                    <el-button type="plain" size="small" icon="el-icon-close" @click="action('company-desc', false)">关闭</el-button>
                </template>
            </comp-html-editor>
        </comp-dialog>
        <comp-dialog title="完善信息" ref="companySetForm">
            <el-form size="small" label-width="210px" style="margin-right: 20px" @submit.native.prevent v-if="companySetForm">
                <el-form-item label="企业/项目简介：">
                    <el-input type="textarea" ref="companySetFormDesc" v-model="companySetForm.desc" style="width: 480px" placeholder="请输入" :maxlength="1000" :rows="4" resize="none" :readonly="loading" @change="setCompany('validate')"></el-input>
                </el-form-item>
                <el-form-item label="社会信用统一代码：">
                    <el-input v-model="companySetForm.code" style="width: 480px" placeholder="请输入" :maxlength="100" :readonly="loading" @change="setCompany('validate')"></el-input>
                </el-form-item>
                <el-form-item label="法定代表人：">
                    <el-input v-model="companySetForm.owner" style="width: 480px" placeholder="请输入" :maxlength="100" :readonly="loading" @change="setCompany('validate')"></el-input>
                </el-form-item>
                <el-form-item label="高新技术企业：">
                    <el-select v-model="companySetForm.cert01" style="width: 480px" placeholder="请选择" @change="setCompany('validate')">
                        <el-option v-for="data in env.companyCert01s" :key="data.id" :label="data.name" :value="data.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单项冠军企业：">
                    <el-select v-model="companySetForm.cert02" style="width: 480px" placeholder="请选择" @change="setCompany('validate')">
                        <el-option v-for="data in env.companyCert02s" :key="data.id" :label="data.name" :value="data.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="国家级专精特新小巨人企业：">
                    <el-select v-model="companySetForm.cert03" style="width: 480px" placeholder="请选择" @change="setCompany('validate')">
                        <el-option v-for="data in env.companyCert03s" :key="data.id" :label="data.name" :value="data.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="自治区级专精特新小巨人企业：">
                    <el-select v-model="companySetForm.cert04" style="width: 480px" placeholder="请选择" @change="setCompany('validate')">
                        <el-option v-for="data in env.companyCert04s" :key="data.id" :label="data.name" :value="data.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="制造业创新中心：">
                    <el-select v-model="companySetForm.cert05" style="width: 480px" placeholder="请选择" @change="setCompany('validate')">
                        <el-option v-for="data in env.companyCert05s" :key="data.id" :label="data.name" :value="data.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业技术中心：">
                    <el-select v-model="companySetForm.cert06" style="width: 480px" placeholder="请选择" @change="setCompany('validate')">
                        <el-option v-for="data in env.companyCert06s" :key="data.id" :label="data.name" :value="data.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-check" @click="setCompany('submit')">保存</el-button>
                    <el-button type="plain" icon="el-icon-close" @click="setCompany('end')">放弃</el-button>
                </el-form-item>
            </el-form>
        </comp-dialog>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string, int, deepCopy, cache } from "../util";
    export default {
        name: "page-staff-corp-company",
        title: "企业/项目详情",
        nodes: ["/menu/staff-corp"],
        childs: [],
        mixins: [mixin],
        data: () => ({
            loading: false,
            companyId: "",
            company: null,
            companySetForm: null,
            self: false,
        }),
        methods: {
            action(name, data) {
                if (this.loading) return;
                if (name === "company-desc") {
                    if (data) {
                        this.$refs.companyDesc.init();
                        this.$nextTick(() => this.$refs.companyDescEditor.init());
                    } else {
                        this.$refs.companyDescEditor.destroy();
                        this.$refs.companyDesc.close();
                    }
                }
            },
            setCompany(action, data) {
                if (this.loading) return;
                let company = this.company;
                let form = this.companySetForm;
                if (!action || action === "start") {
                    this.companySetForm = deepCopy(company);
                    this.setCompany("validate");
                    this.$refs.companySetForm.init();
                    this.$nextTick(() => this.$refs.companySetFormDesc.focus());
                } else if (action === "validate") {
                    let error = "";
                    form.desc = string(form.desc);
                    form.code = string(form.code).trim();
                    form.owner = string(form.owner).trim();
                    if (data) this.plugins.modal.toast(error, "error");
                    return !error;
                } else if (action === "submit") {
                    if (!this.setCompany("validate", true)) return;
                    this.loading = true;
                    this.plugins.user.setCompany(form).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("保存成功！", "success");
                            this.setCompany("end");
                            this.init();
                        } else {
                            this.plugins.modal.alert("保存失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "end") {
                    this.$refs.companySetForm.close();
                }
            },
            destroy() {
                if (this.loading) return;
                return true;
            },
            init() {
                if (this.loading) return;
                let query = this.$route.query;
                let company = null;
                this.loading = true;
                this.companyId = query.companyId;
                this.company = cache(query.companyId);
                this.$root.$refs.navbar.init();
                this.plugins.user.call(async () => {
                    let res = await this.plugins.user.init();
                    if (res.code === 0) { }
                    return res;
                }, async () => {
                    if (this.access(this.$route.name)) return { code: 0 };
                    return this.env.xhrErrors.find((error) => error.code === 4);
                }, async () => {
                    let res = await this.plugins.user.getCompany(query.companyId);
                    if (res.code === 0) company = res.data;
                    return res;
                }).then((res) => {
                    this.loading = false;
                    this.$root.$refs.navbar.init();
                    if (res.code === 0) {
                        this.company = cache(query.companyId, company);
                        console.log(this.company.employees);
                        this.self = this.company.employees.some((employee) => employee.client.id === this.profile.id);
                    } else if (res.code === 2) {
                        this.$root.$refs.navbar.login();
                    } else {
                        this.plugins.modal.alert("页面加载失败", res.code + "：" + res.msg, "error").then(() => this.$router.replace("/corp/companys"));
                    }
                });
            },
        },
    };
</script>

<style lang="scss">
    .page-staff-corp-company {
        overflow: hidden;
    }
</style>